<template>
  <view class="jh-flex-center" style="height: 100vh;background-color: rgba(0,0,0,0);">
    <img-cache :style="{width: showImg ? '100vw' : '0px',height: showImg ? '100vh' : '0px'}" :src="appIndex.value"
      mode="aspectFill" @load="imgLoad"></img-cache>
    <div v-if='!showImg' class="loadingio-spinner-spinner-c62xedoao05">
      <div class="ldio-yu7u3ctt23k">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <view class="countDown font-12 jh-line-height c-fff" @tap="end">
      {{time}} 跳过
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import imgCache from '@/components/img-cache/img-cache.vue';
  // #ifdef APP-PLUS
  const trtc = uni.requireNativePlugin('tx-call');
  //#endif
  export default {
    components: {
      imgCache,
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo,
      }),
    },
    onLoad() {
      uni.preloadPage({
        url: '/pages/login/main'
      });
      uni.preloadPage({
        url: '/pages/index/index'
      });
      let obj = {
        module: "system_info",
        code: "app_index,open_index"
      }
      this.$http.getSettingInfo(obj).then(res => {
        let appIndex = res.data.app_index
        let value = appIndex.value
        if (value.indexOf('http://') != 0 && value.indexOf('https://') != 0) {
          appIndex.value = 'http://' + appIndex.value
        }
        uni.setStorageSync('launchFlag', appIndex)
        this.appIndex = appIndex
      }).catch(e => {
        this.appIndex = uni.getStorageSync('launchFlag') || {}
      })
    },
    onReady() {
      if (this.userInfo?.token?.token) {
        this.login(this.userInfo)
      } else {
        this.reLaunchUrl = '/pages/login/main'
      }
      this.countDown()
    },
    data() {
      return {
        appIndex: {},
        showImg: false,
        reLaunchUrl: '',
        time: 5,
        countDownTimeout: null
      };
    },
    methods: {
      countDown() {
        this.countDownTimeout = setTimeout(() => {
          if (!this.time) {
            return this.end()
          }
          this.time--
          this.countDown()
        }, 1000)
      },
      end() {
        clearTimeout(this.countDownTimeout)
        uni.reLaunch({
          url: this.reLaunchUrl || '/pages/login/main'
        })
      },
      imgLoad() {
        this.showImg = true
      },
      login(info) {
        let {tencent_user_id} = info.user
        tencent_user_id = String(tencent_user_id)
        let obj = {
          identifier: tencent_user_id,
          expire: 259200
        }
        this.$http.getUserSig(obj).then(res => {
          let {userSig, sdkappid} = res.data
          // #ifdef APP-PLUS
          if (trtc) {
            trtc.login({
              sdkAppId: sdkappid,
              userId: tencent_user_id,
              userSig,
            }, res => {
              console.log('login:', res);
            })
          }
          // #endif
          uni.$app.login({
            userID: tencent_user_id,
            userSig: userSig
          }).then(() => {
            this.$store.commit('setRtcConfig', {
              userSig: userSig,
              sdkAppID: sdkappid,
              userID: tencent_user_id
            });
            this.reLaunchUrl = '/pages/index/index'
            console.log('IM登陆了');
          }).catch(() => {})
        })
      }
    },
  };
</script>

<style>
  page {
    background: transparent;
  }
</style>
<style lang="scss">
  .countDown {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba($color: #000000, $alpha: .3);
    padding: 6px;
    height: 12px;
    border-radius: 12px;
  }

  @keyframes ldio-yu7u3ctt23k {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .ldio-yu7u3ctt23k div {
    left: 190rpx;
    top: 96rpx;
    position: absolute;
    animation: ldio-yu7u3ctt23k linear 1s infinite;
    background: #00374D;
    width: 20rpx;
    height: 48rpx;
    border-radius: 10rpx / 24rpx;
    transform-origin: 10rpx 104rpx;
  }

  .ldio-yu7u3ctt23k div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -0.9166666666666666s;
    background: #00374D;
  }

  .ldio-yu7u3ctt23k div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -0.8333333333333334s;
    background: #00374D;
  }

  .ldio-yu7u3ctt23k div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.75s;
    background: #00374D;
  }

  .ldio-yu7u3ctt23k div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.6666666666666666s;
    background: #00374D;
  }

  .ldio-yu7u3ctt23k div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.5833333333333334s;
    background: #00374D;
  }

  .ldio-yu7u3ctt23k div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.5s;
    background: #00374D;
  }

  .ldio-yu7u3ctt23k div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.4166666666666667s;
    background: #00374D;
  }

  .ldio-yu7u3ctt23k div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.3333333333333333s;
    background: #00374D;
  }

  .ldio-yu7u3ctt23k div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.25s;
    background: #00374D;
  }

  .ldio-yu7u3ctt23k div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.16666666666666666s;
    background: #00374D;
  }

  .ldio-yu7u3ctt23k div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.08333333333333333s;
    background: #00374D;
  }

  .ldio-yu7u3ctt23k div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
    background: #00374D;
  }

  .loadingio-spinner-spinner-c62xedoao05 {
    width: 400rpx;
    height: 400rpx;
    display: inline-block;
    overflow: hidden;
    background: none;
  }

  .ldio-yu7u3ctt23k {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(.66);
    transform-origin: center center;
    backface-visibility: hidden;
  }

  .ldio-yu7u3ctt23k div {
    box-sizing: content-box;
  }
</style>
